<!--
 * @Description: 装卸关系网
 * @Author: xuzp4
 * @Date: 2021-06-11 16:19:36
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-06-16 15:49:57
 * @FilePath: \vue_demo\src\view\load\index2.vue
-->

<template>
  <div class="parent">
    <div id="map0" class="map"></div>
    <div id="map1" class="map"></div>
    <div id="map2" class="map"></div>
    <div id="map3" class="map"></div>
    <div id="map4" class="map"></div>
    <div id="map5" class="map"></div>
    <div id="map6" class="map"></div>
    <div id="map7" class="map"></div>
  </div>
</template>

<script>
import { excavatorData } from "./data.js";
import { getLine, sympleLine } from "./data/data";
import minecardImg from "../../assets/dirty.png";
import excavatorImg from "../../assets/my.png";
const mapboxgl = require("mapbox-gl");
export default {
  mounted() {
    // 加载挖机点，线段（id,起始点，结束点，经纬度），根据挖机的百分比，线段id，显示挖机的位置，
    // 挖机点击事件，线段点击事件
    this.initMap();
  },
  methods: {
    initMap() {
      let map;
      mapboxgl.accessToken =
        "pk.eyJ1IjoieHUwNDMwIiwiYSI6ImNrcHMzeGNhbDAzcHoyb280cmM1MGEzYXYifQ.uZFE2jGWs46691vFMwQLPA";
      for (let i = 0; i < 8; i++) {
        map = new mapboxgl.Map({
          container: `map${i}`,
          style: "mapbox://styles/mapbox/satellite-v9",
          zoom: 13,
          minZoom: 13,
          maxZoom: 19,
          center: [113.722, 24.552],
        });
			  map.addControl(new mapboxgl.FullscreenControl());
        this.popup = new mapboxgl.Popup({
          closeButton: false,
          closeOnClick: false,
        });
        this.initData(map);
      }
    },
    initData(map) {
      map.on("load", () => {
        map.loadImage(minecardImg, (error, image) => {
          if (error) {
            throw new Error(error);
          }
          map.addImage("minecard", image);
        });
        map.loadImage(excavatorImg, (error, image) => {
          if (error) {
            throw new Error(error);
          }
          map.addImage("excavator", image);
        });
        this.drawExcavator(map);
        this.handleExcavatorClick(map);
        this.handleExcavatorMouseenter(map);
        this.darwLine(map);
        this.handleLineClick(map);
      });
    },
    drawExcavator(map) {
      const source = [];
      excavatorData.forEach((point) => {
        source.push({
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [point.longitude, point.latitude],
          },
          properties: {
            image: "excavator",
            info: point,
          },
        });
      });
      map.addSource("excavator", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: source,
        },
      });
      map.addLayer({
        id: "excavator",
        source: "excavator",
        type: "symbol",
        layout: {
          "icon-image": ["get", "image"],
          "icon-allow-overlap": true,
          "icon-size": 0.2,
        },
      });
    },
    handleExcavatorMouseenter(map) {
      map.on("mouseenter", "excavator", (e) => {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = "pointer";
        var coordinates = e.features[0].geometry.coordinates.slice();
        var description = JSON.parse(e.features[0].properties.info).name;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        // Populate the popup and set its coordinates
        // based on the feature found.
        this.popup.setLngLat(coordinates).setHTML(description).addTo(map);
      });
      map.on("mouseleave", "excavator", (e) => {
        map.getCanvas().style.cursor = "";
        this.popup.remove();
      });
    },
    handleExcavatorClick(map) {
      map.on("click", "excavator", (e) => {
        console.log(
          "excavator click",
          e,
          JSON.parse(e.features[0].properties.info)
        );
        alert(
          `excavator click${JSON.parse(e.features[0].properties.info).name}`
        );
      });
    },
    darwLine(map) {
      let lineSource = sympleLine;
      map.addSource("line", {
        type: "geojson",
        data: lineSource,
      });
      map.addLayer({
        id: "line-animation",
        type: "line",
        source: "line",
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
        paint: {
          "line-color": "#fff",
          "line-width": 2,
          "line-opacity": 0.8,
          "line-width": 7,
        },
      });
    },
    handleLineClick(map) {
      map.on("click", "line-animation", (e) => {
        alert(`点击line${e.features[0].properties.id}`);
      });
    },
  },
};
</script>

<style>
html,body{
  width:100%;
  height:100%;
}
.parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.map {
  width: 450px;
  height: 400px;
  margin-right:10px;
}
</style>
